<template>
	<view>
		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
			<view class="box nav cu-bar fixed" :style="fixedStyle">
				<slot name="wrapper-content"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'head-navigation',
		data() {
			return {

			};
		},
		computed: {
			fixedStyle() {
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				var bgImage = this.bgImage;
				var bgColor = this.bgColor;
				var fixedStyle = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				if (this.bgImage) {
					fixedStyle = `${fixedStyle}background-image:url(${bgImage});`;
				}
				if (this.bgColor) {
					fixedStyle = `${fixedStyle}background-color:${bgColor};`;
				}
				return fixedStyle;
			}
		},
		props: {
			
			CustomBar: {
				type: String,
				// #ifdef H5 
				default: '100', 
				// #endif  
				// #ifndef H5 
				default: '148'
				// #endif
			},
			
			StatusBar: {
				type: String, 
				// #ifdef H5 
				default: '0', 
				// #endif  
				// #ifndef H5 
				default: '50'
				// #endif
			},

			bgColor: {type: String, default: '#39b54a'},
			bgImage: {type: String, default: ''}
		},
		methods: {

		}
	}
</script>

<style>

</style>
